<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width;initial-scale=1.0">
    <meta charset="UTF-8">
    <title>exam01</title>
    <style>
        .menu {
            float: left;
            width: 20%;
            background-color: #6f8eff;
        }

        .content {
            float: right;
            width: 79%;
            background-color: #ffb40d;
        }

        .footer {
            clear: both;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="header">
        <p>header</p>
    </div>

    <div class="menu">
        <p>navi</p>
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>foobar</li>
        </ul>
    </div>

    <div class="content">
        <p>content</p>
    </div>

    <div class="footer">
        <p>footer</p>
    </div>
</div>

</body>
</html>